<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="inp" /> <span id="tip"></span>

    <script>
      // 用户按下回车键之后,就发送请求,询问用户名是否可用
      inp.onkeyup = function (e) {
        // 只要在文本框输入,这个事件就会触发,所以还要判断按下的是否是回车键
        if (e.keyCode === 13) {
          // 发送ajax请求
          const xhr = new XMLHttpRequest()

          xhr.open('get', `/findUserName?username=${inp.value}`)

          xhr.send(null)

          // 接收响应
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                // 注意: xhr.responseText拿到的一定是字符串,一般要解析成js对象
                // console.log(xhr.responseText)
                const result = JSON.parse(xhr.responseText)
                if (result.code === 2) {
                  //可用
                  tip.style.color = 'green' //海静绿
                } else {
                  //不可用
                  tip.style.color = 'red' //老陶红
                }
                tip.innerText = result.message
              }
            }
          }
        }
      }
    </script>
  </body>
</html>
